<template>
    <div>
        <h1>户型编辑</h1>
        <table border="1px" class="table table-bordered">
            <tbody>
                <tr>
                    <td>户型名称</td>
                    <td>
                        <input type="text" v-model="info.HName">
                    </td>
                </tr>
                <tr>
                    <td>户型结构</td>
                    <td>
                        <select v-model="info.HTName">
                            <option value="">请选择</option>
                            <option :value="a.HTName" v-for="a in hh">{{ a.HTName }}</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td>装修标准</td>
                    <td>
                        <input type="text" v-model="info.Bzhun">
                    </td>
                </tr>
                <tr>
                    <td>建筑面积</td>
                    <td>
                        <input type="number" v-model="info.AllSize">
                    </td>
                </tr>
                <tr>
                    <td>套内面积</td>
                    <td>
                        <input type="number" v-model="info.Size">
                    </td>
                </tr>
                <tr>
                    <td>户型图</td>
                    <td>
                        <input type="file" @change="img">
                        <img :src="info.Photo" width="120px" height="100px" v-if="info.Photo != ''">
                    </td>
                </tr>
                <tr>
                    <td></td>
                    <td>
                        <input type="button" value="提交" class="btn btn-primary" @click="ok">
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import axios from 'axios';
import { useRouter, useRoute } from 'vue-router'
import { log } from 'console';
const router = useRouter();
const route = useRoute();

onMounted(() => {
    bind();
    find();
})

let hh: any = reactive([])

let info: any = reactive({
    "Id": route.query.id,
    "HName": "",
    "HTName": "",
    "Bzhun": "",
    "AllSize": '',
    "Size": '',
    "Photo": ""
})

//绑定
const bind = () => {
    axios({
        url: 'https://localhost:7010/api/House/Bind',
        method: 'get'
    })
        .then((res) => {
            Object.assign(hh, res.data);
        })
}

//图片
const img = (e: any) => {
    console.log(e);
    let obj = e.target.files[0];
    let f = new FormData();
    f.append('file', obj);
    axios({
        url: 'https://localhost:7010/api/House/img',
        method: 'post',
        data: f
    })
        .then((res) => {
            if (res.data == "不是图片") {
                alert('必须是PNG、JPG格式');
                info.Photo = "";
                return;
            }
            else if (res.data == "大了") {
                alert('最多不能超过1MB');
                info.Photo = "";
                return;
            }
            console.log(res.data);
            info.Photo = res.data;
        })
}
//反填
const find = () => {
    axios({
        url: 'https://localhost:7010/api/House/Find',
        method: 'get',
        params:{
            id:info.Id
        }
    })
        .then((res) => {
            Object.assign(info, res.data);
        })
}
//修改
const ok = () => {
    if (info.HName == "") {
        alert('户型名称不能为空!');
        return;
    }
    if (info.HTName == "") {
        alert('户型结构不能为空!');
        return;
    }
    if (info.Bzhun == "") {
        alert('装修标准不能为空!');
        return;
    }
    if (info.AllSize == "") {
        alert('建筑面积不能为空!');
        return;
    }
    if (info.Size == "") {
        alert('套内面积不能为空!');
        return;
    }
    if (info.Photo == "") {
        alert('户型图不能为空!');
        return;
    }
    if (info.AllSize < 60 || info.AllSize > 300) {
        alert('建筑面积不得小于60，不得大于300');
        return;
    }
    if (info.AllSize < info.Size) {
        alert('套内面积必须小于建筑面积');
        return;
    }
    axios({
        url: 'https://localhost:7010/api/House/Update',
        method: 'put',
        data: info
    })
        .then((res) => {
            if (res.data > 0) {
                alert('修改成功!');
                router.push('/show');
                return;
            }
            else {
                alert('修改失败!');
                return;
            }
        })
}
</script>

<style scoped></style>